<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">
  <script type="text/javascript" src="./lib/jquery-3.2.1.js">
  <script type="text/javascript" src="./lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
  <script type="text/javascript" src="./lib/vue.js"></script>

 </script>
  <body>
     <div class="container" id="box">
        <form  role="form" class="" action="index.html" method="post">
            <div class="form-group">
              <label for="username">用户名</label>
              <input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username">
            </div>
            <div class="form-group">
              <label for="age">年  龄</label>
              <input type="text" id="age" class="form-control" placeholder="输入年龄" v-model="age">
            </div>
            <div class="form-group">
              <input type="button" class="btn btn-primary" value="添加" v-on:click="add()">
              <input type="reset" class="btn btn-danger" value="重置">
            </div>
        </form>

        <hr>

        <table class="table table-bordered table-hover">
          <caption class="text-info h2 text-center">用户信息表</caption>
          <tr class="text-danger">
            <th class="text-center">序号</th>
            <th class="text-center">用户</th>
            <th class="text-center">年龄</th>
            <th class="text-center">操作</th>
          </tr>
          <tr class="text-center" v-for="(item,idx) in items">
            <td>{{idx + 1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
              <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>
            </td>
          </tr>

          <tr >
            <td colspan="4" class="text-right">
              <button type="button" name="button" class="btn btn-danger" v-show="items.length>0" v-on:click="removeAll()">全部删除</button>
            </td>
          </tr>
          <tr>
            <td class="text-center text-muted" colspan="4" v-show="items.length==0">
              <p>暂无数据</p>
            </td>
          </tr>
        </table>

        <div role="dialog" class="modal" id="layer">


        </div>

     </div>

  </body>


  <script type="text/javascript">
       window.onload = function () {

         new Vue({
           el:'#box',
           data:{
             items:[],
             username:'',
             age:''

           },
           methods:{
             add:function () {
                this.items.push({
                  name:this.username,
                  age:this.age
                });
                this.username = "";
                this.age = "";

             },
             removeAll:function () {
                this.items = [];

             }

           }
         });


       }

  </script>
</html>
